import React, { memo, useState, useEffect, createContext } from "react";
import { connect } from "react-redux";
import Logout from '../../components/my/Logout/logout'
import Register from '../../components/my/Register/register'
import Login from '../../components/my/login/login'
import { useHistory } from "react-router-dom";
export const isLoginContext = createContext()
import './my.less'
import Title from '../../components/title/title.jsx'
import * as actionTypes from '../my/store/actionCreators'


const My = (props) => {
    // console.log(props, 'myprops');
    const { mydata } = props
    console.log(mydata, 'mydata');
    const { getMyDispatch } = props
    const history = useHistory()
    const [isLogin, setIslogin] = useState(false)
    console.log(isLogin);
    console.log(localStorage.getItem('username'), '000000');
    console.log(localStorage.getItem('password'), '111111');

    const { username, password } = mydata
    console.log(username, 'username');
    console.log(password, 'password');
    // const history = useHistory()
    // const [username, setUsername] = useState("");
    // const [password, setPassword] = useState("");
    // const [user, setUser] = useState()
    // const [i, setI] = useState(1);
    function ChangeisLogin() {
        setIslogin(true)
        // console.log('22')
    }
    useEffect(() => {
        getMyDispatch()
    }, [])

    var loginButton;


    if (localStorage.getItem('username') && localStorage.getItem('username') == username && localStorage.getItem('password') && localStorage.getItem('password') == password) {
        // isLogin=true
        console.log('有记录');
        loginButton = <div><Register /></div>
        // return
    } else {
        if (!isLogin) {
            loginButton = <div><Login ChangeisLogin={ChangeisLogin} username={username} password={password} /></div>;
        } else {
            loginButton = <div><Register /></div>;
        }

    }

    // if (!isLogin) {
    //     loginButton = <div><Login ChangeisLogin={ChangeisLogin} username={username} password={password} /></div>;
    // } else {
    //     loginButton = <div><Register /></div>;
    // }



    const handleSubmit = async e => {
        e.preventDefault();
        console.log('提交了');
        // const user = { username, password };
        // console.log(username, password);
        // let i = 1
        // send the username and password to the server
        // const response = await axios.post(
        //   "http://blogservice.herokuapp.com/api/login",
        //   user
        // );
        // set the state of the user
        // setUser(response.data)
        // store the user in localStorage
        // localStorage.setItem(`username${i}`, username)
        // localStorage.setItem(`password${i}`, password)
        // i=i+1
        // setI(i + 1)
        // console.log(response.data)
        // history.push('/home/main')
        // window.location.href="/home/main"
    };

    // const handleLogout = () => {
    //     setUser({});
    //     setUsername("");
    //     setPassword("");
    //     localStorage.clear();
    // };

    // useEffect(() => {
    //     const loggedInUser = localStorage.getItem("user");
    //     // console.log(loggedInUser);
    //     if (loggedInUser) {
    //         const foundUser = JSON.parse(loggedInUser);
    //         setUser(foundUser);
    //         console.log('之前登录过');
    //     }
    // }, []);

    // if there's a user show the message below
    // if (user) {
    //     return <div>{user.name} is loggged in</div>;
    // }

    // if there's no user, show the login form
    return (
        <>

            <div className="main" >
                <Title />
                {/* <Logout />
                <Register /> */}

                <isLoginContext.Provider value={isLogin}>

                    {loginButton}
                    {/* <button onClick={()=>history.push('/home/register')}>去注册</button> */}
                    {/* <Register /> */}
                </isLoginContext.Provider>

            </div>
        </>



    );


}

const mapStateToProps = (state) => {
    // console.log(state, '////');
    return {
        mydata: state.my.mydata
    }
}
const mapStateToDispatch = (dispatch) => {
    return {
        getMyDispatch() {
            // console.log(actionTypes, 'actionTypes');
            dispatch(actionTypes.getMyData())
        }
    }
}

export default connect(mapStateToProps, mapStateToDispatch)(My)